<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('错题详情')" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>错题信息</h5>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="question-content" id="questionContent"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="options" id="options"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="answer-section">
                                    <div class="answer-item">
                                        <span class="answer-label">我的答案：</span>
                                        <span id="myAnswer"></span>
                                    </div>
                                    <div class="answer-item">
                                        <span class="answer-label">正确答案：</span>
                                        <span id="correctAnswer"></span>
                                    </div>
                                    <div class="answer-item">
                                        <span class="answer-label">练习次数：</span>
                                        <span id="practiceCount"></span>
                                    </div>
                                    <div class="answer-item">
                                        <span class="answer-label">错误次数：</span>
                                        <span id="errorCount"></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var errorId = [[${errorId}]];
        var prefix = ctx + "errorLib/question";
        
        $(function() {
            if (!errorId) {
                $.modal.alertError("参数错误");
                return;
            }

            $.ajax({
                url: prefix + '/detail/' + errorId,
                type: 'GET',
                success: function(result) {
                    if (result.code == 0) {
                        var data = result.data;
                        $('#questionContent').text(data.questionContent);
                        $('#myAnswer').text(data.myAnswer);
                        $('#correctAnswer').text(data.correctAnswer);
                        $('#practiceCount').text(data.practiceCount);
                        $('#errorCount').text(data.errorCount);
                        
                        // 处理选项
                        if (data.options && data.options.length > 0) {
                            var optionsHtml = '';
                            data.options.forEach(function(option) {
                                optionsHtml += '<div class="option-item">' + 
                                    '<span>' + option.options + '、</span>' +
                                    '<span>' + option.content + '</span>' +
                                    '</div>';
                            });
                            $('#options').html(optionsHtml);
                        }
                    } else {
                        $.modal.alertError(result.msg);
                    }
                }
            });
        });
    </script>
</body>
</html> 